<template>
  <div class="container">
    <router-link class="item" v-for="( item, index) in newsList" :key="index" :to="'/news/detail/' + item.id">
      <div class="img-box">
        <img class="top-img" :src="item.top_image" alt="">
      </div>
      <div class="desc-box">
        <div class="title font-16">{{item.title}}</div>
        <div class="time">{{item.update_time}}</div>
        <div class="summary">{{item.summary}}</div>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'NewsList',
  props: {
    newsList: Array
  }
}
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/variable.styl"
  .container
    background-color #f5f8f5
    padding-top .2rem
    padding-bottom .01rem
    .item
      width 96%
      margin 0 auto .2rem auto
      display flex
      flex-direction row
      justify-content space-between
      background-color #fff
      .img-box
        .top-img
          width 2.4rem
          height 2.4rem
          padding .2rem
          margin-right.2rem
      .desc-box
        display flex
        flex-direction column
        justify-content space-between
        .title
          color #000
        .time
          color #888
        .summary
          color #999
          margin-top .2rem
          margin-right .2rem
          font-size .24rem
          line-height .4rem
          height 1.2rem
          overflow hidden
</style>
